<template>
  <div>
    <div class=" text-xl px-4 flex justify-center">
      <div class=" my-title  ">天气预报</div>
    </div>
    <div v-if="showLarge" class="flex flex-col text-white mx-4">
      <div class="h-[140px] w-full flex justify-between">
        <div v-for="(item, index) in nowList" :key="index" class="px-2 text-sm">
          <div class="flex flex-col justify-center items-center">
            <div><i class="text-4xl my-title" :class="`qi-${item.icon}`"></i></div>
            <div>{{ item.fxTime }}</div>
            <div>{{ item.text }}</div>
            <div>{{ item.windDir }} {{ item.windScale }}级</div>
            <div>{{ item.temp }}°C</div>
            <div>湿度：{{ item.humidity }}%</div>
          </div>
        </div>
      </div>
      <div class="w-full h-[140px] flex justify-between">
        <div v-for="(item, index) in daily" :key="index" class="px-2 py-3 text-sm">
          <div class="flex flex-col justify-center items-center">
            <div><i class="text-4xl my-title" :class="`qi-${item.iconDay}`"></i></div>
            <div>{{ item.fxDate }}</div>
            <div>{{ item.textDay }}</div>
            <div>{{ item.windDirDay }} {{ item.windScaleDay }}级</div>
            <div>{{ item.tempMin }}°C ~ {{ item.tempMax }}°C</div>
            <div>湿度：{{ item.humidity }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="text-base h-[440px] mt-[40px]">
      <div class="h-[190px] w-full text-white flex justify-between">
        <div v-for="(item, index) in nowListEnlarge" :key="index" class="px-2">
          <div class="flex flex-col justify-center items-center">
            <div><i class="text-4xl my-title" :class="`qi-${item.icon}`"></i></div>
            <div>{{ item.fxTime }}</div>
            <div>{{ item.text }}</div>
            <div>{{ item.windDir }} {{ item.windScale }}级</div>
            <div>{{ item.temp }}°C</div>
            <div>湿度：{{ item.humidity }}%</div>
          </div>
        </div>
      </div>
      <div class="w-full h-[190px] text-white flex justify-between">
        <div v-for="(item, index) in dailyEnlarge" :key="index" class="px-2 py-3">
          <div class="flex flex-col justify-center items-center">
            <div><i class="text-4xl my-title" :class="`qi-${item.iconDay}`"></i></div>
            <div>{{ item.fxDate }}</div>
            <div>{{ item.textDay }}</div>
            <div>{{ item.windDirDay }} {{ item.windScaleDay }}级</div>
            <div>{{ item.tempMin }}°C ~ {{ item.tempMax }}°C</div>
            <div>湿度：{{ item.humidity }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup >
import { parseTime } from '@/utils/util'
import 'qweather-icons/font/qweather-icons.css'
import { weatherNow, weatherDay } from '@/api/datav'
import { listLand } from "@/api/base/land"

const props = defineProps({
  showLarge: {
    type: Boolean,
    default: true,
  },
})

const AIPKEY = '1e077a10d6664ecfacd6a7c7ddbdf7ff'
const daily = ref([])
const nowList = ref([])
const dailyEnlarge = ref([])
const nowListEnlarge = ref([])


async function getWeather() {
  const res = await weatherDay({ location: '114.50,36.26', key: '34e05e4dd5d84e7b9fbb5017a7dbea6a' })
  daily.value = res.data.daily.slice(0, 4)
  dailyEnlarge.value = res.data.daily.slice(0, 6)
  daily.value[0].fxDate = '今天'
  daily.value[1].fxDate = '明天'
  daily.value[2].fxDate = '后天'
}
async function getWeatherNow() {
  const res = await weatherNow({ location: '114.50,36.26', key: '34e05e4dd5d84e7b9fbb5017a7dbea6a' })
  res.data.hourly.forEach((item) => {
    item.fxTime = parseTime(new Date(item.fxTime).getTime(), '{h}:{m}')
  })
  nowList.value = res.data.hourly.slice(0, 4)
  nowListEnlarge.value = res.data.hourly.slice(0, 7)
  nowList.value.forEach((item) => {
    const timeArr = item.fxTime.split(':')
    item.fxTime = `${timeArr[0]}:00`
  })
  nowListEnlarge.value.forEach((item) => {
    const timeArr = item.fxTime.split(':')
    item.fxTime = `${timeArr[0]}:00`
  })
}


getWeather()
getWeatherNow()
</script>

<style lang="scss">
.my-title {
  background: linear-gradient(to right, hsl(98 100% 62%), hsl(204 100% 59%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  // font-family: cursive;
}
</style>
